import React from 'react'
import {Tabs} from 'antd-mobile';
import './index.css'
import { StickyContainer, Sticky } from 'react-sticky';
const tabs = [
  { title: '推荐' },
  { title: 'LOOK直播' },
  { title: '遇到' },
  { title: '现场' },
  { title: '翻唱' },
  { title: '听BGM' },
  { title: '广场' },
  { title: 'MV'},
  { title: '舞蹈' },
  { title: 'ACG音乐' },
  { title: '韩舞' }
];
export default class Video extends React.Component{
  renderTabBar(props) {
    return (<Sticky>
      {({ style }) => <div style={{ ...style, zIndex: 1 }}><Tabs.DefaultTabBar {...props} /></div>}
    </Sticky>);
  }
  render(){
    return (
      <div className='Video'>
          <StickyContainer>
            <Tabs tabs={tabs}
              initialPage={1}
              swipeable={false}
              renderTabBar={this.renderTabBar}
              onChange={(tab, index) => { console.log('onChange', index, tab); }}
              onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
            >
              {/* {routes.map((item, index) => {
                if (item.exact) {
                  return (<Route key={index} exact path={item.path} component={item.component} />)
                } else {
                  return (<Route key={index} path={item.path} component={item.component} />)
                }
              })} */}
            </Tabs>
          </StickyContainer>
      </div>
    )
  }
}